/**
* 个人管理 我的工单
*/
<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>我的工单</el-breadcrumb-item>
    </el-breadcrumb>
    <el-container style="height: 680px">
      <!-- 列表 -->
      <el-main v-if="!details">
        <el-button @click="haveRead" size="small">标为待办</el-button>
        <el-button @click="haveDone" size="small">标为已办</el-button>
        <el-tabs v-model="queryParams.enableStatus" @tab-click="handleClick">
          <el-tab-pane :label="'全部 ('+stateItem[0].count+')'" name="0"></el-tab-pane>
          <el-tab-pane :label="'待阅 ('+stateItem[1].count+')'" name="1"></el-tab-pane>
          <el-tab-pane :label="'待办 ('+stateItem[2].count+')'" name="2"></el-tab-pane>
          <el-tab-pane :label="'已办 ('+stateItem[3].count+')'" name="3"></el-tab-pane>
        </el-tabs>
        <el-table
          :data="workOrderList"
          height="500"
          style="width: 100%"
          @selection-change="handleSelectionChange">
          <el-table-column
            type="selection"
            width="55">
          </el-table-column>
          <el-table-column
            label="序号"
            type="index"
            width="50">
          </el-table-column>
          <el-table-column
            label="开始时间"
            prop="startTime">
          </el-table-column>
          <el-table-column
            label="截止时间"
            prop="endTime">
          </el-table-column>
          <el-table-column
            label="工单编码"
            prop="orderCode">
          </el-table-column>
          <el-table-column
            label="工单标题"
            prop="orderTitle">
          </el-table-column>
          <el-table-column
            prop="enableStatus"
            label="状态">
            <template slot-scope="scope">
              <el-tag
                :type="scope.row.enableStatus === 1 ? 'info' :
                    scope.row.enableStatus === 2 ? 'success' :
                    scope.row.enableStatus === 3 ? 'warning' : ''"
                disable-transitions>
                {{scope.row.enableStatus == 1 ? '待阅' :
                scope.row.enableStatus == 2 ? '待办' :
                scope.row.enableStatus == 3 ? '已办' : ''}}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column
            align="right">
            <template slot="header" slot-scope="scope">
              <el-input
                v-model="queryParams.orderCodeOrTitleOrContent"
                size="mini"
                placeholder="输入关键字搜索"
                @keyup.native.enter="search"/>
            </template>
            <template slot-scope="scope">
              <el-button
                size="mini"
                @click="handleDetails(scope.$index, scope.row)">查看详情
              </el-button>
              <el-button
                type="danger"
                size="mini"
                @click="handleDelete(scope.$index, scope.row)">删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <Pagination v-bind:child-msg="pageparm" @callFather="pageCallFather"></Pagination>
      </el-main>

      <!-- 详情 -->
      <el-main v-else>

        <el-container>
          <el-header>
            <el-page-header @back="details = false" :content="workOrderDetails.orderTitle" title="返回列表">
            </el-page-header>
          </el-header>
          <el-main style="height: 500px;">
            <div v-html="workOrderDetails.orderContent"></div>
          </el-main>
        </el-container>
        <el-divider content-position="left"><i class="el-icon-files"></i>&ensp;附件列表</el-divider>
        <span class="link" v-for="(item, index) in orderFile" :key="item.id">
          附件{{index+1}}：
          <el-link class="link" type="text" :href="'http://127.0.0.1:9091/officeSystem/file/download?fileId='+item.id" >
            <i class="el-icon-download"></i>&ensp;{{item.fileName}}
        </el-link>
        </span>
      </el-main>
    </el-container>
  </div>
</template>

<script>
    import {Post, Get} from "../../api/axiosFun";
    import Pagination from "../../components/Pagination";
    import {timestampToTime} from "../../utils/util";
    import fileDownload from 'js-file-download'

    export default {
        data() {
            return {
                details: false,
                workOrderDetails: {
                    orderContent: '',
                    orderTitle: ''
                },
                orderFile: [],

                workOrderList: [],
                multipleSelection: [],
                stateItem: [
                    {
                        count: 0
                    },
                    {
                        count: 0
                    },
                    {
                        count: 0
                    },
                    {
                        count: 0
                    }],
                queryParams: {
                    pageIndex: 0,
                    pageSize: 10,
                    enableStatus: 0,
                    orderCodeOrTitleOrContent: ''
                },
                pageparm: {
                    currentPage: 1,
                    pageSize: 10,
                    total: 0
                },
                visible: false
            }
        },

        // 注册组件
        components: {
            //分页组件
            Pagination
        },

        created() {
            this.getWorkOrder();
            this.getItemAndCount();
        },

        methods: {
            getItemAndCount() {
                Post('/officeSystem/workOrder/getItemAndCount')
                    .then(result => {
                        if (result.status == 200) {
                            if (result.data.length == 0) {
                                this.stateItem = [
                                    {
                                        count: 0
                                    },
                                    {
                                        count: 0
                                    },
                                    {
                                        count: 0
                                    },
                                    {
                                        count: 0
                                    }]
                            } else {
                                let allStateItem = 0;
                                for (let i = 0; i < result.data.length; i++) {
                                    allStateItem = allStateItem + result.data[i].enableStatusCount;
                                    if (result.data[i].enableStatus == 1) {
                                        this.stateItem[1].count = result.data[i].enableStatusCount;
                                    } else if (result.data[i].enableStatus == 2) {
                                        this.stateItem[2].count = result.data[i].enableStatusCount;
                                    } else if (result.data[i].enableStatus == 3) {
                                        this.stateItem[3].count = result.data[i].enableStatusCount;
                                    }
                                    this.stateItem[0].count = allStateItem;
                                }
                            }
                        } else {
                            this.$message.error(result.message);
                        }
                    })
            },
            getWorkOrder() {
                Post('/officeSystem/workOrder/selectByQueryCondition', this.queryParams)
                    .then(result => {
                        if (result.status == 200 && result.data.resultList.length != 0) {
                            for (let i = 0; i < result.data.resultList.length; i++) {
                                result.data.resultList[i].startTime = timestampToTime(result.data.resultList[i].startTime)
                                result.data.resultList[i].endTime = timestampToTime(result.data.resultList[i].endTime)
                            }
                            this.pageparm.total = result.data.totalCount;
                            this.workOrderList = result.data.resultList;
                        } else {
                            this.pageparm.total = result.data.totalCount;
                            this.workOrderList = [];
                        }
                        this.getItemAndCount();
                    })
            },
            haveRead() {
                let list = []
                if (this.multipleSelection.length == 0) {
                    this.$message.warning("请选中要操作的数据");
                    return;
                }
                list = list.concat(this.multipleSelection)
                let params = {
                    params: JSON.stringify(list)
                }
                let url = '/officeSystem/workOrder/updateHaveRead';
                Post(url, params)
                    .then(result => {
                        if (result.status == 200) {
                            this.$message.success(result.message);
                            this.getWorkOrder()
                        } else {
                            this.$message.error(result.message);
                        }
                    })
            },
            haveDone() {
                let list = []
                if (this.multipleSelection.length == 0) {
                    this.$message.warning("请选中要操作的数据");
                    return;
                }
                list = list.concat(this.multipleSelection)
                let params = {
                    params: JSON.stringify(list)
                }
                let url = '/officeSystem/workOrder/updateHaveDone';
                Post(url, params)
                    .then(result => {
                        if (result.status == 200) {
                            this.$message.success(result.message);
                            this.getWorkOrder();
                        } else {
                            this.$message.error(result.message);
                        }
                    })
            },
            search() {
                let param = {
                    currentPage: 1,
                    pageSize: 10,
                    total: 0
                }
                this.pageparm = param;
                this.pageCallFather(param);
                this.getWorkOrder();
            },
            pageCallFather(params) {
                this.queryParams.pageIndex = params.currentPage - 1;
                this.queryParams.pageSize = params.pageSize;
                this.getWorkOrder();
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            handleDetails(index, row) {
                this.details = true;
                this.workOrderDetails = row;
                this.orderFile = [];

                Get("/officeSystem/file/selectByOrderId", {
                    workOrderId: row.id
                }).then(result => {
                    if (result.status == 200) {
                        this.orderFile = result.data;
                    } else {
                        this.orderFile = [];
                    }
                })
            },
            handleDelete(index, row) {
                this.$confirm('此操作将永久删除该工单, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    Post("/officeSystem/workOrder/dalete", {
                        id: row.id
                    })
                        .then(result => {
                            if (result.status == 200) {
                                this.$message.success(result.message);
                                this.getWorkOrder();
                            } else {
                                this.$message.error(result.message);
                            }
                        })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            handleClick(tab, event) {
                let param = {
                    currentPage: 1,
                    pageSize: 10,
                    total: 0
                }
                this.pageparm = param;
                this.pageCallFather(param);
                this.queryParams.enableStatus = tab.name;
            }
        }
    }
</script>

<style scoped>
  .link {
    font-size: 20px;
  }
</style>

